<template>
  <div>
    <div class="v-header">
      <div class="back" @click="back"><i class="iconfont icon-left"></i></div>
      <div class="title">我的余额</div>
      <div class="right">提现</div>
    </div>
    <div class="overage-one">
      <p>{{money.commission-money.useCommission + money.sign-money.useSign +money.back-money.useBack}}</p>
      <p>我的余额(福元)</p>
    </div>
    <div class="overage-two">
      <div class="overage-two-item">
        <p>佣金</p>
        <p>{{money.commission}}</p>
      </div>
      <div class="overage-two-item">
        <p>福卡余额</p>
        <p>0.00</p>
      </div>
      <div class="overage-two-item">
        <p>返利</p>
        <p>{{money.back}}</p>
      </div>
    </div>
    <scroll class="overage-wrapper" :data="allOverage" :pullup="pullup" @pullup="getAlloverage">
      <div class="overage-content">
        <div class="overage-three-header">
          <span><img src="../../common/img/myyue.png" alt=""></span>
          <span>余额流水</span>
        </div>
        <div class="overage-three-title">
          <div class="overage-three-title-item">商品</div>
          <div class="overage-three-title-item">价格</div>
          <div class="overage-three-title-item">时间</div>
        </div>
        <div class="overage-three-list" v-for="item in allOverage">
          <div class="overage-three-list-item">{{item.recordType | record}}</div>
          <div class="overage-three-list-item">{{item.incomeAmmount}}</div>
          <div class="overage-three-list-item" style="overflow: hidden">{{item.createTime}}</div>
        </div>
        <div class="loading-hook"></div>
      </div>
    </scroll>
    <router-link to="/purchaseFuka" class="purchase-fuka">
      立即购买福卡
    </router-link>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from '../../axios/axios'
  import BScroll from 'better-scroll'
  import scroll from '../../components/scroll.vue'

  export default {
    data() {
      return {
        pullup: true,
        money: {},
        overage: [],
        allOverage: [],
        page: 1
      };
    },
    created() {

    },
    mounted() {
      var _this = this;
      var token = localStorage.getItem('userToken');
      var data = JSON.stringify({
        "actionName": "findMyByUserId",
        "controllerName": "userBalance",
        "data": [{}]
      });

      if (token) {
        this.$root.tokenValidat(token, function (result) {
          if (result) {
            axios.post({
              data: data,
              callback(res) {
                // console.log(res.data.data)
                _this.money = res.data.data.data;
                console.log(_this.money);
              }
            });
            _this.getOverage();
          } else {
            _this.$router.push('/login');
          }
        })
      }
    },
    methods: {
      getAlloverage: function () {
        var bottomTip = document.querySelector('.loading-hook');
        bottomTip.innerText = '加载中...';
        this.page++;
        this.getOverage();
        if (this.overage.length === 0) {
          bottomTip.innerText = '无数据';
        } else {
          bottomTip.innerText = '加载更多';
        }
      },
      getOverage: function () {
        var _this = this;
        var overData = JSON.stringify({
          'actionName': 'queryListPage',
          'controllerName': 'userBalanceRecord',
          'data': [{}, this.page]
        });
        axios.post({
          data: overData,
          callback(res) {
            if (res.data.data.result === true) {
              _this.overage = res.data.data.data;
              _this.allOverage = _this.allOverage.concat(res.data.data.data);
            }
          }
        })
      },
      back: function () {
        this.$router.back(-1);
      }
    },
    filters: {
      record: function (type) {
        if (type === 'sign') {
          return '签到福利'
        }
        if (type === 'back') {
          return '返利流水'
        }
        if (type === 'amount') {
          return '佣金流水'
        }
        if (type === 'real_shopping') {
          return '线下消费流水'
        }
        if (type === 'shopping') {
          return '购物流水'
        }
      }
    },
    components: {scroll}
  };
</script>

<style type="text/scss" lang="scss">
  @import "../../common/style/public";

  .overage-one {
    width: 100%;
    height: 80px;
    background-color: #f06a22;
    position: fixed;
    top: 44px;
    color: #FFFFFF;
    text-align: center;
    padding-top: 20px;
    box-sizing: border-box;
    z-index: 100;
    p:first-child {
      font-size: 17px;
      padding-bottom: 5px;
    }
  }

  .overage-two {
    width: 100%;
    height: 70px;
    position: fixed;
    top: 124px;
    display: flex;
    background-color: #FFFFFF;
    border-bottom: solid 1px #f5f5f5;
    box-sizing: border-box;
    z-index: 100;
    .overage-two-item {
      flex: 1;
      font-size: 15px;
      padding: 10px 0;
      text-align: center;
      box-sizing: border-box;
      p:last-child {
        padding-top: 10px;
        color: #cd1618;
      }
    }
  }

  .overage-wrapper {
    width: 100%;
    height: calc(100% - 238px);
    position: absolute;
    top: 194px;
    bottom: 44px;
    background-color: #FFFFFF;
    overflow: hidden;
    .overage-content {
      width: 100%;
      .overage-three-header {
        width: 100%;
        height: 40px;
        line-height: 40px;
        display: flex;
        border-bottom: solid 1px #f5f5f5;
        box-sizing: border-box;
        span {
          display: block;
          flex: 5;
        }
        span:first-child {
          padding-top: 5.75px;
          box-sizing: border-box;
          text-align: right;
          padding-right: 10px;
          img {
            width: 28.5px;
            height: 28.5px;
          }
        }
      }
      .overage-three-title, .overage-three-list {
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: #FFFFFF;
        display: flex;
        border-bottom: solid 1px #f5f5f5;
        box-sizing: border-box;
        .overage-three-title-item, .overage-three-list-item {
          flex: 1;
          text-align: center;
        }
      }
    }
  }

  .purchase-fuka {
    width: 100%;
    height: 44px;
    position: fixed;
    bottom: 0;
    line-height: 44px;
    background: linear-gradient(to right, #f06a22, #f04022);
    font-size: 17px;
    color: #FFFFFF;
    text-align: center;
    z-index: 100;
  }
</style>
